import React from 'react';
import Link from 'next/link';
import { replaceImageUrl } from '@/utils';
// css
import styles from '@/styles/CommonComponent.module.scss';

class RelateTicket extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        const { id, city, data } = this.props;
        if(!data.length){
            return <></>
        }
        return (
            <section className={styles['destination-relate-wrap']}>
                <h2>
                    {city}值得去的景点
                    <Link href={`/ticket/?city=${id}`}>
                        <a target="_blank">查看更多<span className="iconfont icon-xialajiantouxiao"></span></a>
                    </Link>
                </h2>
                <div className={styles['row']}>
                    {
                        data.map(item => {
                            return (
                                <div className={styles.item} key={item.id} title={`${item.goodsName} - ${item.description}`}>
                                    <Link href={`/ticket/${item.id}.html`}>
                                        <a target="_blank">
                                            <img src={replaceImageUrl(item.thumbnail)} alt={item.goodsName} />
                                            <h3>{item.goodsName}</h3>
                                        </a>
                                    </Link>
                                    <p className={styles.price}>
                                        ￥<em>{item.showPrice || item.price}</em><span>起</span>
                                    </p>
                                </div>
                            )
                        })
                    }
                </div>
            </section>
        )
    }
}

export default RelateTicket